import React, { useEffect, useState } from 'react'
import http from '../../utils/http'
import { ProductCard } from 'react-vant';
import { InfiniteScroll } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
function Index() {
    const navigate = useNavigate()
    const [hasMore, setHasMore] = useState(true)
    const [list, setList] = useState([])
    const [page, setPage] = useState([])
    // 请求列表数据接口
    const getList = async () => {
        const res = await http.get('/api/list', {
            params: {
                page,
            }
        })

        console.log(res);

        const { code, data } = res.data

        if (code === 200) {
            setList([...list, ...data])
            setPage((e) => e + 1)
        }

        if (data.length === 0) {
            setHasMore(false)
        }

    }

    useEffect(() => {
        getList()
    }, [])

    const handledetail = (id) => {
        navigate(`/detail/${id}`)
    }
    return (
        <div>
            {
                list?.map((item, ind) => (
                    <ProductCard
                        onClick={() => handledetail(item.id)}
                        key={ind}
                        num={item.date}
                        price={item.price}
                        desc={item.title}
                        title={item.id}
                        thumb={item.image}
                    />
                ))
            }
            <InfiniteScroll loadMore={getList} hasMore={hasMore} />
        </div>
    )
}

export default Index
